import React from 'react';
import {UserAPI} from '../utils';
import {useNavigate} from 'react-router-dom';
function UserAdd(){
    //调用hook函数返回一个可以用于导航的方法
    const navigate = useNavigate();
    //创建ref实例 {current:null}
    const usernameRef = React.useRef();
    const handleSubmit = (event)=>{
        //阻止默认提交事件，否则页面就刷新
        event.preventDefault();
        //通过ref获取到最新的输入框的值 作为用户名
        let username = usernameRef.current.value;
        //创建一个新的用户
        let newUser = {id:Date.now()+''+Math.random(),username};
        //把新的用户添加到数组中
        UserAPI.add(newUser);
        //调用navigate方法，传入新的路径，就可以跳转到指定的路径 
        navigate('/user/list')
    }
    return (
       <form onSubmit={handleSubmit}>
          <input type="text" ref={usernameRef}/>
          <input type="submit"/>
       </form>
    )
}
export default UserAdd;